<template>
    <!-- 试卷基础信息 -->
    <el-row class="exam-paper-info-form" type="flex" justify="center">
        <el-col>
            <el-form label-width="150px" :model="baseInfoForm" :rules="baseInfoFormRules" ref="baseInfoForm" @submit.native.prevent>
                <el-form-item label="名称：" prop='name'>
                    <el-input v-model="baseInfoForm.name" auto-complete="off" placeholder="请输入试卷名称"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop='remark'>
                    <el-input
                        type="textarea"
                        placeholder="请输入备注信息，100字以内。"
                        v-model="baseInfoForm.remark"
                        maxlength="100"
                        show-word-limit>
                    </el-input>
                </el-form-item>
                <el-form-item label="分数与提数：" prop='totalScore'>
                    <div>
                        <p class="tips color-2">系统要求试卷总分是100分，如果需要调整不同的题型分数与题数，请通过下方加减进行设置。</p>
                        <div class="question-type-list">
                            <el-row :gutter="40">
                                <el-col :span="4">题型</el-col>
                                <el-col :span="10">每题分数</el-col>
                                <el-col :span="10">题数</el-col>
                            </el-row>
                            <el-row v-for="item in questionConfig" :key="item.sort" :gutter="40">
                                <el-col :span="4">{{ mapQuestionType(item.question_type) }}</el-col>
                                <el-col :span="10">
                                    <el-input-number size="small" v-model="item.question_score" controls-position="right" @change="handleQuestionConfigChange" :min="0"></el-input-number>分
                                </el-col>
                                <el-col :span="10">
                                    <el-input-number size="small" v-model="item.question_num" controls-position="right" @change="handleQuestionConfigChange" :min="0"></el-input-number>道
                                </el-col>
                            </el-row>
                            <el-row class="total-score" type="flex" justify="end">
                                <el-col :span="9">总分<span class="total-score-value" :class="{'color-3': baseInfoForm.totalScore==100, 'color-1': baseInfoForm.totalScore!=100}">{{ baseInfoForm.totalScore }}</span></el-col>
                            </el-row>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="及格线：" prop='passLine'>
                    <el-input-number v-model="baseInfoForm.passLine" controls-position="right" :min="1" :max="100"></el-input-number>分
                </el-form-item>
                <el-form-item label="排序：">
                    <p class="tips color-2">系统默认按判断题、单选题、多选题进行排序。</p>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>
<script>
export default {
    name: 'ExamPaperBaseInfo',
    props: {
        oldInfo: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data() {
        // 检测总分
        var checkTotalScore = (rule, value, callback) => {
            let sorce = this.baseInfoForm.totalScore
            if (sorce != 100) {
                callback(new Error('总分必须为100分，请重新设置分数与题数'))
            } else {
                callback();
            }
        }
        return {
            baseInfoForm: {
                name: '',
                remark: '',
                passLine: '60',
                questionConfigStr: [],
                totalScore: 0 // 计算总得分
            },
            baseInfoFormRules: {
                name: [
                    { required: true, message: '请输入试卷名称', trigger: 'blur' }
                ],
                totalScore: [
                    { required: true, validator: checkTotalScore }
                ],
                passLine: [
                    { required: true, message: '请设置及格线', trigger: 'change' }
                ]
            },
            // 试卷题型配置
            questionConfig: [
                {
                    question_type: 1,
                    question_score: 0,
                    question_num: 0,
                    sort: 1
                }, {
                    question_type: 2,
                    question_score: 0,
                    question_num: 0,
                    sort: 2
                }, {
                    question_type: 3,
                    question_score: 0,
                    question_num: 0,
                    sort: 3
                }
            ],
        }
    },
    created() {
        if(this.oldInfo && this.oldInfo.name) {
            let questionConifgList = JSON.parse(this.oldInfo.questionConfigStr)
            $.extend(this.baseInfoForm, this.oldInfo)
            // 回显试题配置
            for(let i=0, len=questionConifgList.length; i < len; i++) {
                for(let j=0, num=this.questionConfig.length; j < num; j++) {
                    if(this.questionConfig[j].question_type == questionConifgList[i].question_type) {
                        this.questionConfig[j].question_score = questionConifgList[i].question_score
                        this.questionConfig[j].question_num = questionConifgList[i].question_num
                        break
                    }
                }
            }
            this.handleQuestionConfigChange()
        }
    },
    methods: {
        mapQuestionType(key) {
            let MapList = {
                1: '判断题',
                2: '单选题',
                3: '多选题'
            }

            return MapList[key]
        },
        // 单项配置变动
        handleQuestionConfigChange() {
            let score = 0
            for(let i=0, len=this.questionConfig.length; i < len; i++) {
                score += (this.questionConfig[i].question_score * this.questionConfig[i].question_num)
            }
            this.baseInfoForm.totalScore = score
        },
        // 获取数据
        getData() {
            let that = this
            let data = {}
            let arr = []

            // 校验表单
            that.$refs['baseInfoForm'].validate((valid) => {
                if(valid) {
                    for(let i=0, len=that.questionConfig.length; i < len; i++) {
                        if(that.questionConfig[i].question_score * that.questionConfig[i].question_num != 0) {
                            arr.push(that.questionConfig[i])
                        }
                    }

                    that.baseInfoForm.questionConfigStr = JSON.stringify(arr)

                    data = {
                        name: that.baseInfoForm.name,
                        remark: that.baseInfoForm.remark,
                        passLine: that.baseInfoForm.passLine,
                        questionConfigStr: that.baseInfoForm.questionConfigStr,
                    }
                } else {
                    data = false
                }
            })
            
            return data
        }
    },
    watch: {
        oldInfo(val) {

        }
    }
}
</script>
<style lang="scss">
.exam-paper-info-form {
    .question-type-list {
        .el-input-number {
            margin-right: 10px;
        }
        .total-score {
            border-top: 1px solid #DCDFE6;
            margin-top: 5px;
            text-align: center;
            .total-score-value {
                margin-left: 10px;
            }
        }
    }
}
</style>